<template>
	<view class="list">
		<view class="item" v-for="(item,index) in list" :key="item.id" @click="navTo(item.id)">
			<image :src="item.pic_url" mode="widthFix"></image>
			<view class="ops">
				<text>{{item.subtitle}}</text>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data() {
		return {
			list:[]
		}
	},
	methods: {
		async getList(){
			const res = await this.$request({url:this.$api.article.list})
			//console.log(res);
			if(res.code==0){
				this.list = res.data.list
				console.log(this.list); //pages/topic/list
			}
			
		},
		navTo(id){
			uni.navigateTo({
				url:"/pages/article/article-detail/article-detail?id="+id
			})
		}
	},
	created() {
		this.getList()
	}
}
</script>

<style lang="scss" scoped>
	.list{
		display: flex;
		padding: 0 20rpx;
		flex-wrap: wrap;
		.item{
			width:calc(33.33% - 20rpx);
			position: relative;
			margin: 10upx;
			image{
				display: block;
				border-radius: 10upx;
				width: 100%;
				object-fit: cover;
			}
			.ops{
				color: #fff;
				text-align: center;
				font-family: "微软雅黑";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 0.8em;
				line-height: 1.2em;
				text{
					display: block;
				}
			}
		}
	}
</style>
